<!-- 组件说明 -->
<template>
  <div
    :class="
      currentName === 'my'
        ? 'havebottombar videoIndex videoIndex2'
        : 'havebottombar videoIndex'
    "
  >
    <div class="container clearfix">
      <van-tabs @disabled="ifLoginFn" ref="tabs" @change="tabsChange" swipeable>
        <van-tab replace name="reco" title="Reco">
          <videoIndexComp
            :currentName="currentName"
            :list="hotVideoList"
            :pageSize="Number(pageSize)"
            :currPage="Number(currPage)"
            :totalItem="Number(totalItem)"
            @_getMoreVideo="getMoreVideo"
          ></videoIndexComp>
        </van-tab>
        <van-tab
          :disabled="!userStoreData.isLogin"
          replace
          name="my"
          title="My"
        >
          <videoMy :currentName="currentName"></videoMy>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import videoIndexComp from "./videoIndexComp";
import videoMy from "./videoMy";
import { mapState } from "vuex";
import { ifLogin, utilGotoLogin } from "@/utils/index.js";

// let setStepValue = step => {
//   console.log("当前累计步数为：" + step);
//   return step;
// };
export default {
  components: {
    videoIndexComp,
    videoMy
  },
  data() {
    return {
      img: require("@/assets/imgs/index/defaultPic.png"),
      currentName: "reco",
      hotVideoList: [],

      pageSize: 5,
      currPage: 1,
      totalItem: 0
    };
  },
  watch: {
    currentName(newVal, oldVal) {
      console.log(newVal);
      if (newVal == "reco") {
        console.log("reco");
        this.videoRecommendList();
      }
    }
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    userStoreData: state => state.user
  }),
  methods: {
    getMoreVideo() {
      let targetCurrPage = Number(this.currPage) + 1;
      this.videoRecommendList(targetCurrPage);
    },
    ifLoginFn() {
      if (!ifLogin()) {
        utilGotoLogin();
      }
    },
    tabsChange(name, title) {
      let videoAll = document.querySelectorAll("video");
      for (let i = 0; i < videoAll.length; i++) {
        videoAll[i].pause();
      }
      // console.log(title);
      this.currentName = name;
      // this.$forceUpdate();
    },
    pageinit() {
      this.videoRecommendList();
    },
    // 推荐视频列表
    videoRecommendList(targetCurrPage) {
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      let zs = this;
      this.api.videoController
        .videoRecommendList({
          pageSize: zs.pageSize,
          currPage: targetCurrPage || zs.currPage,
          isMy: 0,
          userId: zs.userStoreData.userId
        })
        .then(res => {
          zs.$toast.clear();
          if (res.data.code === 200) {
            if (targetCurrPage) {
              zs.hotVideoList.push(...res.data.data.list);
            } else {
              zs.hotVideoList = res.data.data.list;
            }
            zs.totalItem = res.data.data.totalItem;
          } else {
            zs.$toast(res.data.info);
          }
        });
    },
    // 路有跳转
    goto(name) {
      this.$router.push({
        name
      });
    },
    fnstop() {
      return false;
    }
  },
  mounted() {
    this.pageinit();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
@import url("./../../../assets/css/common.less");
@import url("./fissionindex.less");
</style>
<style lang="less">
.videoIndex .van-tabs__content {
}
.videoIndex .van-tabs__wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1;
  background-color: transparent;
  .van-tabs__nav {
    background-color: transparent;
    .van-tab__text--ellipsis {
      color: #fff;
    }
  }
  .van-tabs__line {
    display: none;
  }
  .van-tab--active {
    position: relative;
    span {
      font-weight: bold;
    }
    &::after {
      content: "";
      width: 0.44rem;
      height: 0.14rem;
      background-color: #fff;
      border-radius: 0.07rem;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 0);
    }
  }
}
.videoIndex2 .van-tabs__wrap {
  background-color: rgba(36, 33, 56, 1);
  .van-tabs__nav {
    background-color: rgba(36, 33, 56, 1);
    .van-tab__text--ellipsis {
      color: rgba(255, 255, 255, 1);
    }
  }
  .van-tabs__line {
    display: none;
  }
  .van-tab--active {
    position: relative;
    span {
      font-weight: bold;
    }
    &::after {
      content: "";
      width: 0.44rem;
      height: 0.14rem;
      background-color: #fff;
      border-radius: 0.07rem;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 0);
    }
  }
}
</style>
